import { Box } from 'components/Box/Box';
import { Text } from 'components/Text/Text';
import { useTranslations } from 'next-intl';
import NextImage from 'next/legacy/image';
import Link from 'next/link';
import React from 'react';
import { grid } from './UsedBy.css';

const frens = [
  {
    asset: 'coinbase',
    name: 'Coinbase',
    url: 'https://bridge.base.org/',
  },
  {
    asset: 'optimism',
    name: 'Optimism',
    url: 'https://app.optimism.io/bridge',
  },
  {
    asset: 'arbitrum',
    name: 'Arbitrum',
    url: 'https://arbitrum.foundation/',
  },
  {
    asset: 'warpcast',
    name: 'Warpcast',
    url: 'https://warpcast.com/',
  },
  {
    asset: 'opensea-pro',
    name: 'OpenSea Pro',
    url: 'https://pro.opensea.io/',
  },
  {
    asset: 'ens',
    name: 'ENS',
    url: 'https://app.ens.domains/',
  },
  {
    asset: 'prop-house',
    name: 'Prop House',
    url: 'https://prop.house/',
  },
  {
    asset: 'matcha',
    name: 'Matcha',
    url: 'https://www.matcha.xyz/',
  },
  {
    asset: 'kwenta',
    name: 'Kwenta',
    url: 'https://kwenta.eth.limo/',
  },
  {
    asset: 'aura',
    name: 'Aura',
    url: 'https://app.aura.finance/',
  },
  {
    asset: 'lyra',
    name: 'Lyra',
    url: 'https://app.lyra.finance/',
  },
  {
    asset: 'looksrare',
    name: 'LooksRare',
    url: 'https://looksrare.org/',
  },
  {
    asset: 'defillama',
    name: 'DefiLlama',
    url: 'https://swap.defillama.com/',
  },
  {
    asset: 'nftx-yield',
    name: 'NFTX Yield',
    url: 'https://yield.nftx.io/',
  },
  {
    asset: 'pooltogether',
    name: 'PoolTogether',
    url: 'https://app.pooltogether.com/',
  },
  {
    asset: 'art-blocks',
    name: 'Art Blocks',
    url: 'https://www.artblocks.io/',
  },
  {
    asset: 'cool-cats',
    name: 'Cool Cats',
    url: 'https://coolcatsnft.com/',
  },
  {
    asset: 'party',
    name: 'Party',
    url: 'https://www.party.app/',
  },
  {
    asset: 'superrare',
    name: 'SuperRare',
    url: 'https://superrare.com/',
  },
  {
    asset: 'trader-joe',
    name: 'Trader Joe',
    url: 'https://traderjoexyz.com/',
  },
  {
    asset: 'doodles',
    name: 'Doodles',
    url: 'https://doodles.app/',
  },
  {
    asset: 'frax',
    name: 'Frax',
    url: 'https://app.frax.finance/',
  },
  {
    asset: 'speedtracer',
    name: 'Speedtracer',
    url: 'https://www.speedtracer.xyz/',
  },
  {
    asset: 'gitcoin',
    name: 'Gitcoin',
    url: 'https://www.gitcoin.co/',
  },
];

export function UsedBy() {
  const t = useTranslations('landing');
  return (
    <>
      <Text
        align="center"
        as="p"
        marginTop={{ md: '0', xs: '11' }}
        marginX="auto"
        size={{ md: '5', xs: '4' }}
        style={{ lineHeight: '28px', maxWidth: 720 }}
        weight="semibold"
      >
        {t('adopters')}
      </Text>

      <Box marginTop={{ md: '11', xs: '10' }} marginX="auto">
        <Box className={grid}>
          {frens.map((fren) => (
            <Link
              href={fren.url}
              key={fren.name}
              style={{ textDecoration: 'none' }}
            >
              <Box textAlign="center">
                <Box
                  as="span"
                  borderRadius="round"
                  display="inline-block"
                  height={{
                    lg: '_48',
                    xs: '11',
                  }}
                  overflow="hidden"
                  style={{
                    boxShadow: '0px 8px 24px rgba(0, 0, 0, 0.4)',
                  }}
                  width={{
                    lg: '_48',
                    xs: '11',
                  }}
                >
                  <NextImage
                    alt={fren.name}
                    height={64}
                    layout="responsive"
                    src={`/frens/${fren.asset}.png`}
                    width={64}
                  />
                </Box>
                <Text
                  color="labelSecondary"
                  marginTop="2"
                  size={{
                    lg: '3',
                    xs: '2',
                  }}
                  variant={undefined}
                  weight="semibold"
                >
                  {fren.name}
                </Text>
              </Box>
            </Link>
          ))}
        </Box>
      </Box>
    </>
  );
}
